<template>
  <div class="register">
    <head_top head_back="true" title_head ="注册"></head_top>
    <div class="info-wrap">
      <div class="top-img">
        <img class="img-responsive" src="../../../image/cont00.png" alt="">
        <span>请注册哦</span>
      </div>
      <div class="user-register">
        <span @click='showHide("7%",true)'>账号注册</span>
        <span @click='showHide("58%",false)'>手机注册</span>
        <span class="line"></span>
      </div>
      <div class="register-info">
        <form action="" style="width: 100%;display: block">
          <div class="account" :class="{hide:!see}">
            <div class="account-zh">
              <span>账号:</span>
              <span>
              <input type="text" placeholder="请输入账号">
            </span>
            </div>
            <div class="account-pw">
              <span>密码:</span>
              <span>
              <input type="password" placeholder="请输入密码">
            </span>
            </div>
            <div class="account-mkSure">
              <span>密码:</span>
              <span>
              <input type="password" placeholder="请再次输入密码">
            </span>
            </div>
            <div style="border: none;background:#2aaa6d;color: white;padding: 5px;width: 50%;border-radius: 3px;">确认注册</div>
          </div>
          <div class="account" :class="{hide:see}">
              <div class="account-zh">
                <span>账号:</span>
                <span>
              <input type="text" placeholder="请输入手机号">
            </span>
              </div>
              <div class="account-pw">
                <span>验证码:</span>
                <span>
                  <input type="password" placeholder="请输入验证码">
                  <input type="submit" value="发送" style="white-space: nowrap;width: 50px;border: none;outline: none">
                </span>
              </div>
              <div class="account-mkSure">
                <span>密码:</span>
                <span>
              <input type="password" placeholder="请输入密码">
            </span>
              </div>
              <div style="border: none;background:#2aaa6d;color: white;padding: 5px;width: 50%;border-radius: 3px;">确认注册</div>
          </div>
        </form>

      </div>
    </div>
  </div>
</template>

<script>
  import head_top from '../../header'
export default {
  name: 'hello',
  data () {
    return {
      msg: '',
      see: true,
    }
  },
  components: {
    head_top
  },
  mounted: function() {
  },
  methods: {
      showHide(size,see){
          var self = this;
          $(".line").css("left",size);
          self.see = see;
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.register {
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  z-index: 666;
  font-family: "微软雅黑";
  color: #2aaa6d;
  background: white;
}
.info-wrap {
  margin-top: 80px;
  width: 100%;
  height: 100%;
  background: white;
}
.info-wrap div {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}
.info-wrap .top-img {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  margin-bottom: 20px;
  width: 60px;
  height: 50px;
}
.info-wrap .user-register {
  position: relative;
  width: 50%;
}
.info-wrap .user-register span{
  flex: 1;
}
.info-wrap .user-register span.line {
  position: absolute;
  bottom: -3px;
  left: 7%;
  width: 35%;
  height: 3px;
  transition: all .3s;
  background: #2aaa6d;
}
.info-wrap .register-info {
  min-height: 160px;
  width: 80%;
  margin: 0 auto;
  margin-top: 10px;
  overflow: hidden;
  border: 1px dashed  #2aaa6d;
}
.info-wrap .register-info > div {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.hide {
  display: none;
}


.info-wrap .register-info .account  {
  display: flex;
  flex-direction: column;
}
.info-wrap .register-info .account >div {
  display: flex;
  align-items: center;
  margin-top: 10px;
  width: 80%;
  border-bottom: 1px solid #2aaa6d;
}
.info-wrap .register-info .account >div input {
  border: none;
  outline: none;
  width: 100%;
  padding-left: 10px;
}
.info-wrap .register-info .account >div >span:first-child{
  width: 50px;
  text-align: left;
}
.info-wrap .register-info .account >div >span:last-child{
  flex: 1;
  display: flex;
}
</style>
